<template>
  <div class="container">
    <!-- 左右布局 -->
    <div class="main-content">
      <!-- 左半边区域 -->
      <div class="left-side">
        <!-- 底部操作区域 -->
        <div class="footer">
          <img :src="LuHuoPng" class="logo" />
          <!-- 提示 -->
          <div class="tip">
            应用描述或者图片至少输入一项
          </div>

          <!-- 输入区域 -->
          <el-input
            v-model="textContent"
            type="textarea"
            :rows="5"
            placeholder="请输入应用描述（可选），示例：编写一个蓝河大赛邀请参赛应用"
            class="input-content"
          />

          <!-- 上传区域 -->
          <el-upload
            class="upload-area"
            action="#"
            :auto-upload="false"
            :on-change="handleFileChange"
            :on-remove="handleFileRemove"
            :on-exceed="handleExceed"
            :before-upload="beforeUpload"
            :limit="1"
            :file-list="fileList"
            list-type="picture"
            :on-preview="handlePicturePreview"
            :http-request="customUpload"
          >
            <template #trigger>
              <el-button type="primary">选择图片（可选）</el-button>
            </template>
            <template #tip>
              <div class="upload-tip">
                可以上传相关手机app界面的截图, 只能上传 jpg/png 文件，且不超过 5MB
              </div>
            </template>
          </el-upload>

          <div style="display: flex; flex-direction: column">
            <el-button
              :loading="loading"
              @click="handleSubmit"
              type="primary"
              class="submit-button"
              :disabled="!isValidSubmit"
            >
              生成代码
            </el-button>
            <div style="margin-top: 20px"></div>
            <el-button
              type="danger"
              @click="resetContent"
              style="width: 100%;"
            >
              重置
            </el-button>
          </div>
          <!-- 新增思考内容展示区域 -->
          <div class="thinking-section">
            <div class="switch-container">
              <el-switch v-model="isDeepThinking" />
              <span class="switch-label">开启深度思考</span>
            </div>
            <div class="model-info">
              <div>多模态模型为：Doubao-1.5-vision-pro-32k</div>
              <div>文本模型为：{{ currentModel }}</div>
            </div>
            <el-input
              ref="thinkingContentRef"
              v-model="thinkingContent"
              type="textarea"
              :rows="8"
              :readonly="true"
              :placeholder="thinkingPlaceholder"
              class="input-content"
              @scroll.native="handleScroll"
            />
          </div>
        </div>
      </div>

      <!-- 右半边区域 -->
      <div class="right-side">
        <!-- 手机预览区域 -->
        <div class="phone-preview">
          <div class="phone-container">
            <iframe
              v-if="isCompleted"
              ref="previewIframe"
              :srcdoc="extractedCode"
              class="phone-iframe"
              @load="onIframeLoad"
            ></iframe>
            <div v-else class="empty-state">
              <el-icon class="empty-icon"><Document /></el-icon>
              <span>代码将在这里渲染</span>
            </div>
          </div>
        </div>

        <!-- Markdown 预览区域 -->
        <div class="markdown-preview">
          <div v-if="markdownContent" class="markdown-container">
            <MdEditor
              ref="editorRef"
              v-model="markdownContent"
              :toolbars="toolbars"
              :preview="false"
              :show-code-row-number="true"
              class="md-preview"
              :preview-theme="isDark ? 'dark' : 'light'"
              :code-theme="isDark ? 'atom-one-dark' : 'atom-one-light'"
              :codeFoldable="false"
              @onChange="handleMarkdownChange"
            />
          </div>
          <div v-else class="empty-state">
            <el-icon class="empty-icon"><Document /></el-icon>
            <span>生成的代码将在这里显示</span>
          </div>
          <!-- 添加输入框和按钮 -->
          <div class="optimization-section">
            <el-input
              v-model="optimizationQuery"
              type="textarea"
              :rows="3"
              class="input-content"
              placeholder="如页面存在不满意之处，请输入您的修改意见"
            />
            <el-button
              :loading="loadingOptimization"
              @click="handleOptimizeCode"
              type="primary"
              class="submit-button"
              :disabled="!isCompleted"
              style="margin-top: 15px; max-width: 150px;"
            >
              二次优化代码
            </el-button>
          </div>
        </div>

      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" center>
    <div style="display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;">
        <img width="320px" :src="imgUrl">
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { vscodeRequest, RequestConfig } from '@/utils/vscode-request'
import { convertCodeToMarkdown } from '@/utils/markdown-helper'
import { onMounted, onUnmounted, ref, computed, watch, nextTick, defineExpose } from 'vue'
import { ElMessage } from 'element-plus'
import type { UploadFile } from 'element-plus'
import { Document } from '@element-plus/icons-vue'
import { vscode } from '@/utils/vscode'
import LuHuoPng from '@/assets/luhuo.png'
import { MdEditor, ToolbarNames } from 'md-editor-v3'
import type { ExposeParam } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import hljs from 'highlight.js'
import typescript from 'highlight.js/lib/languages/typescript'
import javascript from 'highlight.js/lib/languages/javascript'
import xml from 'highlight.js/lib/languages/xml'
import css from 'highlight.js/lib/languages/css'
import json from 'highlight.js/lib/languages/json'
import bash from 'highlight.js/lib/languages/bash'
import 'highlight.js/styles/github-dark.css'
import type { UploadProps, ElInput } from 'element-plus'

const cancelRequestId = ref<string>('')
const textContent = ref<string>('')
const fileList = ref<UploadFile[]>([])
const loading = ref<boolean>(false)
const markdownContent = ref<string>('')
const imgUrl = ref<string>('')
const dialogVisible = ref(false)
const isCompleted = ref<boolean>(false)
const optimizationQuery = ref<string>('') // 二次优化的输入框内容
const loadingOptimization = ref<boolean>(false) // 二次优化的加载状态
const defaultPrompt = ref('生成一个看起来完全像此图的网页代码。')
const toolbars: ToolbarNames[] = ['pageFullscreen', 'preview', 'previewOnly']
const editorRef = ref<ExposeParam>();
const emit = defineEmits(['updateCode'])
// 新增思考内容相关状态
const thinkingContent = ref<string>('')
const thinkingContentRef = ref<InstanceType<typeof ElInput> | null>(null)
// 增加滚动控制逻辑
const isAtBottom = ref(true)
const props = defineProps<{
  pageId: string
  active: boolean
}>()
// 新增iframe引用和加载处理
const previewIframe = ref<HTMLIFrameElement>()
const isDeepThinking = ref(true)
const currentModel = computed(() => 
  isDeepThinking.value ? 'deepseek-r1' : 'qwen-max-0125'
)

const handlePicturePreview: UploadProps['onPreview'] = () => {
  dialogVisible.value = true
}

const onIframeLoad = () => {
  const iframeDoc = previewIframe.value?.contentDocument
  if (!iframeDoc) return
  // 注入交互脚本
  const script = document.createElement('script')
  script.setAttribute('nonce', '2lMU328qsiz5m7PJbUcbO7Flx4ZFVQqQ');
  script.textContent = `
    (function(pageId) {
      let currentSelected = null
      
      function handleElementClick(e) {
        e.preventDefault()
        e.stopPropagation()
        
        currentSelected = e.target.closest('[onclick]') || e.target
        
        const elementId = currentSelected.id || 'element-' + Date.now()
        if (!currentSelected.id) {
          currentSelected.id = elementId
        }
        
        window.parent.postMessage({
          action: 'showPageSelector',
          elementId: currentSelected.id,
          pageId: pageId
        }, '*')
      }
      
      function handleMouseOver(e) {
        e.target.style.outline = '2px dashed #409EFF'
      }
      
      function handleMouseOut(e) {
        e.target.style.outline = ''
      }
      
      function enableSelection() {
        document.body.addEventListener('click', handleElementClick)
        document.body.addEventListener('mouseover', handleMouseOver)
        document.body.addEventListener('mouseout', handleMouseOut)
      }
      
      // 初始化选择功能
      setTimeout(enableSelection, 500)
      
      // 接收父页面更新
      window.addEventListener('message', function(e) {
        if (e.source !== window.parent) return
        if (e.data.action === 'updateOnclick' && e.data.pageId === pageId) {
          const element = document.getElementById(e.data.elementId)
          if (element) {
            // element.setAttribute('onclick', \`jumpTo('/pages/\${e.data.pageName}')\`)
          }
        }
      })
      
    })('${props.pageId}')
  `
  iframeDoc.body.appendChild(script)
}

// 暴露iframe引用给父组件
defineExpose({
  markdownContent,
  getIframe: () => previewIframe.value
})

const resetContent = () => {
  markdownContent.value = ''
  thinkingContent.value = ''
  isCompleted.value = false
  loading.value = false
  loadingOptimization.value = false
  if (cancelRequestId.value) {
    vscodeRequest.cancel(cancelRequestId.value)
  }
}

const thinkingPlaceholder = computed(() => 
  thinkingContent.value ? '' : '暂无深度思考'
)

watch(thinkingContent, async () => {
  await nextTick() // 等待 DOM 更新
  autoScrollToBottom()
})

const checkScrollPosition = () => {
  if (thinkingContentRef.value) {
    const textarea = thinkingContentRef.value.textarea
    if (!textarea) return
    
    const { scrollTop, scrollHeight, clientHeight } = textarea
    isAtBottom.value = scrollHeight - (scrollTop + clientHeight) < 50
  }
}

const autoScrollToBottom = () => {
  if (thinkingContentRef.value) {
    const textarea = thinkingContentRef.value.textarea
    if (!textarea) return
    
    if (isAtBottom.value) {
      textarea.scrollTop = textarea.scrollHeight
    }
  }
}

// 监听滚动事件
const handleScroll = () => {
  checkScrollPosition()
}

// 滚动到底部
const scrollToBottom = (element: any) => {
  element.scrollTop = element.scrollHeight - element.clientHeight;
};

// 回到顶部
const scrollToTop = (element: any) => {
  element.scrollTop = 0;
};

// 监听 markdownContent 的变化，自动滚动到底部
watch(markdownContent, async () => {
  if (!isCompleted.value) {
    if (editorRef.value) {
      await nextTick()
      const container = (editorRef.value as any).$el.getElementsByClassName('cm-scroller')[0];
      if (container) {
        scrollToBottom(container);
      }
    }
  } else {
    const codeMatch = markdownContent.value.match(/```html\n([\s\S]*?)```/)
    emit('updateCode', codeMatch ? codeMatch[1] : '')
  }
})

const handleMarkdownChange = (value: string) => {
  markdownContent.value = value;
};

// 全部完成后滚动到顶部
watch(isCompleted, (newVal) => {
  if (newVal) {
    if (editorRef.value) {
      const container = (editorRef.value as any).$el.getElementsByClassName('cm-scroller')[0];
      if (container) {
        scrollToTop(container);
      }
      editorRef.value.togglePreview(true);
    }
  }
})

const isDark = computed(() => {
  return document.body.classList.contains('vscode-dark')
})

const isValidSubmit = computed(() => {
  return textContent.value.trim() || fileList.value.length > 0
})

const extractedCode = computed(() => {
  const codeMatch = markdownContent.value.match(/```html\n([\s\S]*?)```/)
  return codeMatch ? codeMatch[1] : ''
})

const configureHighlight = () => {
  hljs.registerLanguage('typescript', typescript)
  hljs.registerLanguage('javascript', javascript)
  hljs.registerLanguage('html', xml)
  hljs.registerLanguage('css', css)
  hljs.registerLanguage('json', json)
  hljs.registerLanguage('bash', bash)
}

onMounted(() => {
  configureHighlight()
  vscode.postMessage({ command: 'get-theme' })
  window.addEventListener('message', handleMessage)
})

onUnmounted(() => {
  window.removeEventListener('message', handleMessage)
  fileList.value.forEach(file => {
    if (file.url && file.url.startsWith('blob:')) {
      URL.revokeObjectURL(file.url)
    }
  })
})

const handleMessage = (event: MessageEvent) => {
  const message = event.data
  if (message.type === 'theme-changed') {
    
  } else if (message.type === 'imgUploaded') {
    imgUrl.value = message.imgUrl
  }
}

const handleFileChange = async (uploadFile: UploadFile) => {
  if (uploadFile.raw) {
    try {
      const blobUrl = URL.createObjectURL(uploadFile.raw)
      
      fileList.value = [{
        ...uploadFile,
        url: blobUrl
      }]
      
      const fileReader = new FileReader();
 
      fileReader.onload = () => {
        vscode.postMessage({
          command: 'uploadImg',
          imgName: uploadFile.name,
          imgBase64: fileReader.result,
        })
      };
 
      fileReader.readAsDataURL(uploadFile.raw);
      
    } catch (error) {
      console.error('处理文件预览失败:', error)
      ElMessage.error('图片预览失败')
    }
  }
}

const customUpload = async () => {
  return false
}

const handleExceed = () => {
  ElMessage.warning('只能上传一张图片，请先删除已有图片')
}

const handleFileRemove = () => {
  imgUrl.value = ''
}

const beforeUpload = (file: File): boolean => {
  const allowedTypes = ['image/jpeg', 'image/png']
  const isImage = allowedTypes.includes(file.type)
  if (!isImage) {
    ElMessage.error('只能上传 JPG 或 PNG 格式的图片!')
    return false
  }
  
  const maxSize = 5 * 1024 * 1024
  const isLt5M = file.size < maxSize
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过 5MB!')
    return false
  }
  
  return true
}

const startSSERequest = async (query: string, imgUrl: string, optimizationQuery: string) => {

  try {    
    // 清空之前的思考内容
    thinkingContent.value = ''

    var requestParams: RequestConfig
    if (optimizationQuery !== '') {
      const codeMatch = markdownContent.value.match(/```html\n([\s\S]*?)```/)
      if (!codeMatch) {
        throw new Error('未找到有效的代码内容')
      }
      const code = codeMatch[1]
      requestParams = {
        model: currentModel.value,
        type: 'txt',
        additional_messages: [
          {
            role: 'assistant',
            type: 'answer',
            content: code,
            content_type: 'text'
          },
          {
            role: 'user',
            content: optimizationQuery + '，请根据以上要求调整代码并返回完整代码。',
            content_type: 'text'
          }
        ]
      }
    } else {
      if (imgUrl !== '') {
        const object_string = JSON.stringify([
          {
            type: 'image',
            file_url: imgUrl
          },
          {
            type: 'text',
            text: query !== '' ? query : defaultPrompt.value
          }
        ])
        requestParams = {
          model: currentModel.value,
          type: 'img',
          additional_messages: [
            {
              role: 'user',
              content: object_string,
              content_type: 'object_string'
            }
          ]
        }
      } else {
        requestParams = {
          model: currentModel.value,
          type: 'txt',
          additional_messages: [
            {
              role: 'user',
              content: query,
              content_type: 'text'
            }
          ]
        }
      }
    }

    markdownContent.value = ''
    isCompleted.value = false

    await vscodeRequest.streamRequest(
      requestParams,
      (requestId: string) => {
        cancelRequestId.value = requestId
      },
      (reasoning_content: string) => {
        if (reasoning_content) {
          thinkingContent.value += reasoning_content
        }
      },
      (content: string) => {
        if (isCompleted.value) {
          return;
        }

        if (content) {
          markdownContent.value += content;
        }
      }
    ).then(() => {
      isCompleted.value = true;
      const hasHtmlCodeBlock = /```html[\s\S]*?```/.test(markdownContent.value);
      if (!hasHtmlCodeBlock) {
        markdownContent.value = convertCodeToMarkdown(markdownContent.value, 'html')
      } else {
        const codeMatch = markdownContent.value.match(/```html\n([\s\S]*?)```/)
        emit('updateCode', codeMatch ? codeMatch[1] : '')
      }
    })

  } catch (error: any) {
    thinkingContent.value = ''
    markdownContent.value = ''
    console.error('SSE 请求失败:', error)
    ElMessage.error(error.message || '生成内容失败，请重试')
  }
}

const handleSubmit = async (): Promise<void> => {
  if (!isValidSubmit.value) {
    ElMessage.warning('请至少输入应用描述或上传界面截图')
    return
  }

  try {
    loading.value = true
    
    if (textContent.value.trim() || fileList.value.length > 0) {
      await startSSERequest(textContent.value.trim(), imgUrl.value, '')
    }

  } catch (error: any) {
    console.error('提交失败:', error)
    ElMessage.error(error.message || '提交失败，请重试')
  } finally {
    loading.value = false
  }
}

// 二次优化代码逻辑
const handleOptimizeCode = async (): Promise<void> => {
  if (!optimizationQuery.value.trim()) {
    ElMessage.warning('请输入优化需求')
    return
  }

  try {
    loadingOptimization.value = true
    await startSSERequest('', '', optimizationQuery.value.trim())
  } catch (error: any) {
    console.error('二次优化失败:', error)
    ElMessage.error(error.message || '二次优化失败，请重试')
  } finally {
    loadingOptimization.value = false
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--vscode-editor-foreground);
  background-color: var(--vscode-editor-background);
}

/* 左右布局 */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 左半边区域 */
.left-side {
  max-width: 260px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-right: 1px solid var(--vscode-panel-border);
  overflow-y: auto;
}

/* 右半边区域 */
.right-side {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow-y: auto;
}

/* 手机预览区域 */
.phone-preview {
  width: 415px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.phone-container {
  /* width: calc(80vh * 0.461);
  height: 80vh; */
  width: 375px;
  height: 812px;
  position: relative;
  background-color: #000; /* 手机背景色 */
  border-radius: 30px; /* 圆角 */
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 20px;
}

/* 手机 iframe */
.phone-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background-color: #fff; /* iframe 内容背景色 */
  pointer-events: auto !important;
}

/* Markdown 预览区域 */
.markdown-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow: hidden; /* 防止内容撑开 */
}

.markdown-container {
  height: calc(100% - 140px); /* 减去 optimization-section 的高度 */
  background-color: var(--vscode-editor-background);
  overflow-y: auto; /* 允许内容滚动 */
  width: 600px;
  min-width: 100%;
  max-width: 100%;
}

.optimization-section {
  position: sticky; /* 固定在底部 */
  bottom: 0;
  width: 100%; /* 宽度为父容器的 100% */
  max-width: 100%; /* 防止超出父容器 */
  background-color: var(--vscode-editor-background);
  padding: 20px 0;
  border-top: 1px solid var(--vscode-panel-border);
  z-index: 1; /* 确保在内容之上 */
}

/* 限制输入框和按钮的宽度 */
.optimization-section .input-content,
.optimization-section .submit-button {
  width: 100%; /* 宽度为父容器的 100% */
  max-width: 100%; /* 防止超出父容器 */
}

.empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--vscode-descriptionForeground);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* 底部操作区域 */
.footer {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.logo {
  width: 60px;
  height: 50px;
  margin: auto;
  object-fit: contain;
}

.tip {
  font-size: 12px;
  color: var(--vscode-descriptionForeground);
  padding: 4px 8px;
  background-color: var(--vscode-textBlockQuote-background);
  border-left: 4px solid var(--vscode-textBlockQuote-border);
  border-radius: 2px;
  word-break: break-all;
}

.input-content {
  width: 100%;
}

.upload-area {
  border: 1px dashed var(--vscode-input-border);
  border-radius: 6px;
  background-color: var(--vscode-input-background);
  padding: 10px;
}

.upload-tip {
  color: var(--vscode-descriptionForeground);
  margin-top: 10px;
  font-size: 14px;
  width: 100%;
}

/* 新增思考内容区域样式 */
.thinking-section {
  margin-top: 20px;
  border-top: 1px solid var(--vscode-panel-border);
  padding-top: 15px;
}

.switch-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding: 12px;
  background-color: var(--vscode-textBlockQuote-background);
  border-radius: 4px;
}

.switch-label {
  font-size: 14px;
  color: var(--vscode-editor-foreground);
}

.model-info {
  margin: -5px 0 15px 12px;
  font-size: 12px;
  color: var(--vscode-descriptionForeground);
  line-height: 1.6;
}

.model-info div {
  word-break: break-all;
}

.submit-button {
  width: 100%;
  background-color: var(--vscode-button-background);
  border-color: var(--vscode-button-background);
  color: var(--vscode-button-foreground);
}

.submit-button:hover {
  background-color: var(--vscode-button-hoverBackground);
  border-color: var(--vscode-button-hoverBackground);
}

/* Element Plus 组件样式覆盖 */
:deep(.el-textarea__inner) {
  background-color: var(--vscode-input-background);
  border-color: var(--vscode-input-border);
  color: var(--vscode-input-foreground);
}

:deep(.el-textarea__inner::placeholder) {
  color: var(--vscode-input-placeholderForeground);
}

:deep(.el-upload-list__item) {
  background-color: var(--vscode-input-background);
  border-color: var(--vscode-input-border);
  color: var(--vscode-input-foreground);
}

:deep(.el-input-group__append) {
  background-color: var(--vscode-button-background);
  border-color: var(--vscode-input-border);
  padding: 0 8px;
}

:deep(.el-input-group__append .el-button) {
  border: none;
  padding: 4px;
  color: var(--vscode-button-foreground);
}

:deep(.el-input__wrapper) {
  background-color: var(--vscode-input-background) !important;
}

:deep(.el-input__inner) {
  color: var(--vscode-input-foreground) !important;
}

/* Markdown 预览样式 */
:deep(.md-preview) {
  background-color: var(--vscode-editor-background) !important;
  color: var(--vscode-editor-foreground) !important;
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word; /* 确保内容换行 */
}

:deep(.md-preview-container) {
  padding: 16px !important;
}

:deep(.md-preview pre) {
  background-color: var(--vscode-textCodeBlock-background) !important;
  margin: 16px 0;
}

:deep(.md-preview code) {
  color: var(--vscode-textPreformat-foreground) !important;
  font-family: var(--vscode-editor-font-family);
}

:deep(.md-preview blockquote) {
  border-left: 4px solid var(--vscode-textBlockQuote-border) !important;
  background-color: var(--vscode-textBlockQuote-background) !important;
  padding: 8px 16px;
  margin: 16px 0;
}

:deep(.md-preview h1),
:deep(.md-preview h2),
:deep(.md-preview h3),
:deep(.md-preview h4),
:deep(.md-preview h5),
:deep(.md-preview h6) {
  color: var(--vscode-editor-foreground) !important;
  border-bottom: 1px solid var(--vscode-panel-border);
  padding-bottom: 8px;
}

:deep(.md-preview a) {
  color: var(--vscode-textLink-foreground) !important;
}

:deep(.md-preview table) {
  border-collapse: collapse;
  margin: 16px 0;
  width: 100%;
}

:deep(.md-preview th),
:deep(.md-preview td) {
  border: 1px solid var(--vscode-panel-border);
  padding: 8px;
}

:deep(.md-preview th) {
  background-color: var(--vscode-textBlockQuote-background);
}

:deep(.md-preview img) {
  max-width: 100%;
  height: auto;
}

:deep(.md-preview ul),
:deep(.md-preview ol) {
  padding-left: 24px;
}

:deep(.md-preview li) {
  margin: 4px 0;
}

:deep(.md-preview hr) {
  border: none;
  border-top: 1px solid var(--vscode-panel-border);
  margin: 16px 0;
}

/* 代码行号样式 */
:deep(.line-numbers-rows) {
  border-right: 1px solid var(--vscode-panel-border);
  padding-right: 8px;
}

/* 自定义代码块样式 */
:deep(.code-block) {
  margin: 16px 0;
}

:deep(.code-block pre) {
  margin: 0;
  padding: 16px;
}

/* 确保代码块内容完全展示 */
:deep(.code-block .code-block-body) {
  max-height: none !important;
}
</style>
